<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>html5超逼真翻书效果 - Demo 1</title>
		<meta name="description" content="Animated Books with CSS 3D Transforms" />
		<meta name="keywords" content="book, 3d, interactive, animated, 3d transform, css, web design" />
		<!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="css/demo.css" />-->
		<link rel="stylesheet" type="text/css" href="css/book.css" />
		<!--<script src="js/modernizr.custom.js"></script>-->
	</head>
	<body>
			<div class="component">

				<ul class="align">
					<li>
						<figure class='book'>

						<!-- Front -->

							<ul class='hardcover_front'>
								<li>
									<img src="img/cover.jpg" alt="" width="100%" height="100%">
								</li>
								<li></li>
							</ul>

						<!-- Pages -->

							<ul class='page'>
								<li></li>
								<li>
									<a class="btn" href="#">Download</a>
								</li>
								<li></li>
								<li></li>
								<li></li>
							</ul>

						<!-- Back -->

							<ul class='hardcover_back'>
								<li></li>
								<li></li>
							</ul>
							<ul class='book_spine'>
								<li></li>
								<li></li>
							</ul>
							<figcaption>
								<h1>Papelucho Perdido</h1>
								<span>By Marcela Paz</span>
								<p>Fennel bamboo shoot pea sprouts rutabaga parsnip green bean gram wattle seed lentil horseradish nori. Grape lettuce turnip greens.</p>
							</figcaption>
						</figure>
					</li>
				</ul>
				<p class="note">请注意：只有支持CSS 3D Transforms的浏览器才能看到效果. IE10 <strong>不支持</strong> <em>preserve-3d</em> 所以看不到效果.</p>
			</div>
		</div><!-- /container -->
	</body>
</html>